@extends('wap.layout.base')
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    pageData: {!! $lists !!},
                    finished: false,//是否已加载完成，加载完成后不再触发load事件
                    loading: false,//加载loading开关
                    cListData: [],
                    cPageData: null,
                    pListData: [],
                    pPageData: null,
                    params: {page : 2, title : ''},
                    title: "{{ $pageTitle }}",
                    target: "{{ $target }}",
                    tabValue: 0,
                    historyKeyword: JSON.parse(localStorage.getItem('historyKeyword')) ? JSON.parse(localStorage.getItem('historyKeyword')) : [],
                }
            },
            created(){
                this.listData = this.pageData.data;
            },
            methods: {
                project() {
                    let that = this;
                    this.finished = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('wap.project.index') }}",this.params,function(res){
                            that.pPageData = res.data;
                            if(that.params.page == 1){
                                that.pListData = res.data.data;
                            }else{
                                that.pListData = that.pListData.concat(res.data.data);
                            }
                            if((that.pPageData.last_page == 1) || (that.params.page == that.pPageData.last_page)){
                                that.finished = true;
                            }
                            that.loading = false;
                            that.params.page ++;
                        })
                    },500);
                },
                projectInfo(id) {
                    window.location.href = "{{ route('wap.project.info') }}"+'?id='+id;
                },
                column() {
                    let that = this;
                    this.finished = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('wap.column.index') }}",this.params,function(res){
                            that.cPageData = res.data;
                            if(that.params.page == 1){
                                that.cListData = res.data.data;
                            }else{
                                that.cListData = that.cListData.concat(res.data.data);
                            }
                            if((that.cPageData.last_page == 1) || (that.params.page == that.cPageData.last_page)){
                                that.finished = true;
                            }
                            that.loading = false;
                            that.params.page ++;
                        })
                    },500);
                },
                columnInfo(id) {
                    window.location.href = "{{ route('wap.column.info') }}"+'?id='+id;
                },
                news() {
                    let that = this;
                    this.finished = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('wap.index.index') }}",this.params,function(res){
                            that.pageData = res.data;
                            if(that.params.page == 1){
                                that.listData = res.data.data;
                            }else{
                                that.listData = that.listData.concat(res.data.data);
                            }
                            if((that.pageData.last_page == 1) || (that.params.page == that.pageData.last_page)){
                                that.finished = true;
                            }
                            that.loading = false;
                            that.params.page ++;
                        })
                    },500);
                },
                newsInfo(id) {
                    window.location.href = "{{ route('wap.new.info') }}"+'?id='+id;
                },
                tagSearch(k){
                    this.params.page = 1;
                    this.params.title = k;
                    switch(this.tabValue){
                        case 0:
                            this.pageData = [];
                            this.listData = [];
                            this.news();
                            break;
                        case 1:
                            this.cPageData = [];
                            this.cListData = [];
                            this.column();
                            break;
                        case 2:
                            this.pPageData = [];
                            this.pListData = [];
                            this.project();
                            break;
                    }
                },
                search(){
                    this.params.page = 1;
                    if(this.params.title){
                        if(!this.historyKeyword.includes(this.params.title)){
                            this.historyKeyword.unshift(this.params.title);
                            localStorage.setItem('historyKeyword',JSON.stringify(this.historyKeyword));
                        }
                    }
                    switch (this.tabValue) {
                        case 0:
                            this.pageData = [];
                            this.listData = [];
                            this.news();
                            break;
                        case 1:
                            this.cPageData = [];
                            this.cListData = [];
                            this.column();
                            break;
                        case 2:
                            this.pPageData = [];
                            this.pListData = [];
                            this.project();
                            break;
                    }
                },
                clearStorage(){
                    localStorage.removeItem('historyKeyword');
                    this.historyKeyword = [];
                },
                onClickLeft() {
                    window.location.href = this.target;
                },
                changeTab(index){
                    this.params.page = 1;
                    this.tabValue = index;
                    switch (index) {
                        case 0:
                            this.pageData = [];
                            this.listData = [];
                            this.news();
                            break;
                        case 1:
                            this.cPageData = [];
                            this.cListData = [];
                            this.column();
                            break;
                        case 2:
                            this.pPageData = [];
                            this.pListData = [];
                            this.project();
                            break;
                    }

                }
            },
            filters:{
                ellipsis(value){
                    if(!value) return '';
                    if(value.length > 5){
                        return value.slice(0,5) + '...'
                    }
                    return value
                },
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main" style="background: #fff">
        <div class="row">
            <div id="app" class="search" v-cloak>
                <van-nav-bar
                        :title="title"
                        left-text=""
                        border
                        fixed="true"
                        left-arrow="false"
                        @click-left="onClickLeft">
                    <van-icon name="arrow-left" slot="left"/>
                </van-nav-bar>
                <div class="col-xs-12 project-search">
                    <input v-model="params.title" style="margin-top: 0" type="text" placeholder="搜索关键字">
                    <button @click="search()" class="project-search-btn"></button>
                </div>
                <div class="col-lg-12">
                    <div class="search-log">
                        <h4>搜索记录 <button @click="clearStorage()" class="log-close">清空</button></h4>
                        <ul>
                            <li v-for="word in historyKeyword" @click="tagSearch(word)">@{{ word }}</li>
                        </ul>
                    </div>
                </div>
                <van-tabs @click="changeTab" class="search-tab" style="margin-top: 1rem" color="#13afe0" title-active-color="#13afe0" swipeable>
                    <van-tab title="新 闻">
                        <van-list
                                v-model="loading"
                                :finished="finished"
                                finished-text="没有更多了"
                                @load="news">
                            <div class="col-xs-12" v-for="items in listData"  @click="newsInfo(items.id)">
                                <div class="main-item">
                                    <div class="main-item-img">
                                        <span class="tag-name" v-if="items.cate_child">@{{ items.cate_child.name }}</span>
                                        <span class="tag-name none" v-else></span>
                                        <img :src="items.thumb">
                                    </div>
                                    <div class="main-item-info">
                                        <p class="info-title">@{{ items.title }}</p>
                                        <p class="info-other">
                                            <img :src="items.user.avatar">
                                            <span class="info-other-name">
                                @{{ moment(items.created_at).format('YYYY-MM-DD') }}<i></i>
                            </span>
                                            <span class="info-other-view"><i class="fa fa-eye"></i> @{{ items.view }}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-tab>
                    <van-tab title="专 栏">
                        <van-list
                                v-model="loading"
                                :finished="finished"
                                finished-text="没有更多了"
                                @load="column">
                            <div class="col-xs-12" v-for="items in cListData"  @click="columnInfo(items.id)">
                                <div class="column-item">
                                    <div class="column-item-info">
                                        <div class="item-info-avatar">
                                            <img :src="items.avatar" alt="">
                                        </div>
                                        <div class="item-info-go">
                                            <p class="item-info-name"> @{{ items.truename }}</p>
                                            <table>
                                                <tr class="table-title">
                                                    <td>文章数 @{{ items.total_news }}</td>
                                                    <td>浏览量 @{{ items.total_views }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="column-item-note">作者简介：@{{ items.introduce ? items.introduce : '这个家伙很懒，什么也没留下' }}</div>
                                </div>
                            </div>
                        </van-list>
                    </van-tab>
                    <van-tab title="项 目">
                        <van-list
                                v-model="loading"
                                :finished="finished"
                                finished-text="没有更多了"
                                @load="project">
                            <div class="col-xs-12" v-for="items in pListData"  @click="projectInfo(items.id)">
                                <div class="project-item">
                                    <div class="project-item-info">
                                        <div class="item-info-avatar">
                                            <img :src="items.thumb" alt="">
                                        </div>
                                        <div class="item-info-go">
                                            <p class="item-info-name"> @{{ items.title | ellipsis }} <button>@{{ items.cate.name }}</button></p>
                                            <p class="item-info-tag tag1"><i class="fa fa-map-marker"></i> @{{ items.region }}</p>
                                            <p class="item-info-tag tag2"><i class="fa fa-tag"></i> @{{ items.explain }}</p>
                                            <p class="item-info-tag tag3"><i class="fa fa-clock-o"></i> @{{ moment(items.online).format('YYYY年MM月DD日') }}上线</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-tab>
                </van-tabs>

            </div>
        </div>
    </div>
@endsection

